<template>
	<view class="container">
		<view class="headerNav">
			<u-navbar back-icon-color="#0567F0" :border-bottom="false" title="" @leftClick="goBack" placeholder
				:background="{ background: 'transparent' }"></u-navbar>
		</view>
		<view class="bigview">
			<view class="topview"></view>
			<view class="bottomview">
				<view class="listnav">
					<view class="listcenter">
						<view class="top">
							<image src="/pages/pagesPersonal/static/personal/icon.png"></image>
							<text>锁定C位，提高5倍曝光率</text>
						</view>
						<view class="bottom">
							<view class="imgbottom" @tap="godeail(1)">
								<text>简历置顶</text>
							</view>
						</view>
					</view>
				</view>
				<view class="listnav">

					<view class="listcenter">
						<view class="top">
							<image src="../static/personal/icon.png"></image>
							<text>即刻出发脱颖而出，秀出自我</text>
						</view>
						<view class="bottom">
							<view class="imgbottom  imgbottom2" @tap="godeail(2)">
								<text>醒目标签</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const data = reactive({

	})
	const godeail = (i) => {
		switch (i) {
			case 1:
				uni.$u.route('pages/pagesPersonal/services/top/top')
				break;
			case 2:
				uni.$u.route('pages/pagesPersonal/services/markedness/markedness')
				break;
		}

	}
	const goBack = () => {
		uni.$u.route({
			type: 'back'
		})
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.container {
		padding: 30rpx;
		width: 100%;
		height: 100vh;
		background-image: url("");
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.bigview {
			width: 100%;

			.topview {
				width: 100%;
				height: 396rpx;
				background-image: url("");
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.bottomview {
				width: 100%;

				.listnav {
					width: 100%;
					height: 360rpx;
					padding: 20rpx;

					.listcenter {
						width: 100%;
						height: 100%;
						background-image: url("../static/personal/kz.png");
						background-repeat: no-repeat;
						background-size: 100% 100%;
						padding: 40rpx;

						.top {
							display: flex;
							align-items: flex-end;
							font-size: 32rpx;
							font-weight: bold;
							font-family: SourceHanSansSC-regular;

							image {
								width: 80rpx;
								height: 86rpx;
							}
						}

						.bottom {
							width: 100%;
							display: flex;
							justify-content: flex-end;
							margin-top: 30rpx;

							.imgbottom {
								color: #fff;
								width: 190rpx;
								height: 88rpx;
								background-image: url("/pages/pagesPersonal/static/personal/btnred.png");
								background-repeat: no-repeat;
								background-size: 100% 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								font-family: SourceHanSansSC-regular;
							}

							.imgbottom2 {
								background-image: url('/pages/pagesPersonal/static/personal/btnblue.png');
								background-size: 100% 115%;
							}
						}
					}
				}

			}
		}
	}
</style>